<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
    <div id='app'>
        {{msg}}=====
   ====={{aa}}=======
<hr>
   firstN:<input type="text" name="" id="" v-model="firstN">
   lastN:<input type="text" name="" id="" v-model="lastN">

   姓名：{{fullN}}
        
    </div>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                aa:"这是一个aa",
                lastN:"姓",
                firstN:"名",
                fullN:1

            },
            watch:{
                // lastN(val){
                //     console.log(1111)
                    
                //     this.fullN=val+this.lastN
                // },
                firstN(newVal,oldVal){
                    console.log(val,qq,8888)
                    this.fullN=this.lastN
                },

                lastN(val){
                    this.fullN++;
                },
                fullN(){
                    console.log(11111)
                    
                }

            }
        });
    </script>
</body>
</html>